<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-warning" style="font-size: 14px">
          欢迎使用人事管理系统
          <br/>
          <h4 class="text-danger">
            当前位置：首页
          </h4>
        </blockquote>

        <hr/>
      </el-col>
    </el-row>





    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
<!--        <h2>角色人员数量</h2>-->
        <div id="main">

        </div>
        <p>
          <b>当前版本:</b><span>0.0.1</span>
        </p>
        <!--        <p>
                  <el-tag type="danger">&yen;免费开源</el-tag>
                </p>-->

        <!--        <p>
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-cloudy"
                    plain
                    @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')"
                  >访问码云
                  </el-button
                  >
                  <el-button
                    size="mini"
                    icon="el-icon-s-home"
                    plain
                    @click="goTarget('http://ruoyi.vip')"
                  >访问主页
                  </el-button
                  >
                </p>-->
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <div id="main1">

        </div>
<!--        <el-row>-->
<!--          <el-col :span="12">-->
<!--            <h2>待定区域</h2>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="6">-->
<!--            <h4>待定</h4>-->
<!--            <ul>-->
<!--              <li>待定</li>-->
<!--              <li>待定</li>-->
<!--              <li>...</li>-->
<!--            </ul>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <h4>待定区域</h4>-->
<!--            <ul>-->
<!--              <li>待定</li>-->
<!--              <li>待定</li>-->
<!--              <li>...</li>-->
<!--            </ul>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </el-col>
    </el-row>


    <el-divider/>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>工作提醒栏</span>
          </div>
          <div class="body">

            <div v-show="zhuanzhengTime>=0&&zhuanzhengTime<=5">
              <h4 class="text-danger">
                转正时间小于五天 ，预计在：{{ EmploymentConfirmationTime }} 转正
              </h4>
            </div>

            <div v-show="hetongTime>=0&&hetongTime<=10">
              <h4 class="text-danger">
                合同到期时间小于十天 ，预计在：{{ ContractEndTime }} 合同到期
              </h4>
            </div>

          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>待处理任务</span>
          </div>
          <div class="body">
            <el-badge v-model="taskTobeDone.outTaskCount" v-show="taskTobeDone.outTaskCount > 0" :max="99" class="item">
              <el-button size="small" @click="skipOutApproval">外出审批待处理任务</el-button>
            </el-badge>
            <el-badge v-model="taskTobeDone.workOvertimeTaskCount" v-show="taskTobeDone.workOvertimeTaskCount > 0" :max="99" class="item">
              <el-button size="small" @click="skipWorkOvertimeApproval">加班审批待处理任务</el-button>
            </el-badge>
            <el-badge v-model="taskTobeDone.workOvertimeVerifyCount" v-show="taskTobeDone.workOvertimeVerifyCount > 0" :max="99" class="item">
              <el-button size="small" @click="skipWorkOvertimeVerify">加班核实待处理任务</el-button>
            </el-badge>
            <el-badge v-model="taskTobeDone.workOvertimeFinalAssureTaskCount" v-show="taskTobeDone.workOvertimeFinalAssureTaskCount > 0" :max="99" class="item">
              <el-button size="small" @click="skipWorkOvertimeFinalApproval">加班最终确认待处理任务</el-button>
            </el-badge>
            <el-badge v-model="taskTobeDone.leaveTaskCount" v-show="taskTobeDone.leaveTaskCount > 0" :max="99" class="item">
              <el-button size="small" @click="skipLeaveApproval">请假审批待处理任务</el-button>
            </el-badge>
            <el-badge v-model="taskTobeDone.holidayTask" v-show="taskTobeDone.holidayTask > 0" :max="99" class="item">
              <el-button size="small" @click="skipLeaveApproval">休假审批待处理任务</el-button>
            </el-badge>
            <el-badge v-model="taskTobeDone.visitTaskCount" v-show="taskTobeDone.visitTaskCount > 0" :max="99" class="item">
              <el-button size="small" @click="skipLeaveApproval">探亲审批待处理任务</el-button>
            </el-badge>
            <el-badge v-model="taskTobeDone.sealDeptCount" v-show="taskTobeDone.sealDeptCount> 0" :max="99" class="item">
              <el-button size="small" @click="deptSealApproval">用印科室审批待处理任务</el-button>
            </el-badge>
            <el-badge v-model="taskTobeDone.sealMasterCount" v-show="taskTobeDone.sealMasterCount> 0" :max="99" class="item">
              <el-button size="small" @click="deptSealApproval">用印负责人审批待处理任务</el-button>
            </el-badge>

          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>

</template>

<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus } from "@/api/system/role";
import { getContractEndTime, getEmploymentConfirmationTime } from '@/api/system/user'
import { selectIndexRoleChart } from '@/api/Index/chart'
import {getTaskToBeDone} from '@/api/system/notice'
import { parseDate } from '@/utils'


// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';


import { LineChart } from 'echarts/charts';
import log from './monitor/job/log'






export default {

  // props: {
  //   type: {
  //     type: String,
  //     default: 'default'
  //   }
  // },

  name: 'Index',
  data() {
    return {

      // 版本号
      version: '3.8.3',
      //转正时间
      EmploymentConfirmationTime: null,
      //合同到期时间
      ContractEndTime: null,
      //现在时间
      newTime: null,
      //转正计算结果
      zhuanzhengTime: null,
      //合同计算结果
      hetongTime: null,
      //待处理任务
      taskTobeDone:{
        //外出待处理任务个数
        outTaskCount:undefined,
        //加班审批待处理任务个数
        workOvertimeTaskCount:undefined,
        //加班核实待处理任务个数
        workOvertimeVerifyCount:undefined,
        //加班最终确认待处理任务个数
        workOvertimeFinalAssureTaskCount:undefined,
        //请假待处理任务个数
        leaveTaskCount:undefined,
        //休假待处理任务个数
        holidayTask:undefined,
        //探亲待处理任务个数
        visitTaskCount:undefined,
        //用印科室审核任务个数
        sealDeptCount:undefined,
        //用印负责人审核任务个数
        sealMasterCount:undefined
      }
    }
  },

  created() {

    // listRole().then(response => {
    //   console.log(response)
    //
    // })
    // getRole().then(response => {
    //   this.userId = response.data.list.userId
    //
    // })


    // 注册必须的组件
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer,

      GridComponent, LineChart, CanvasRenderer, UniversalTransition
    ]);



    //前端现在时间
    this.newTime = parseDate(new Date(), 'YYYY-MM-DD HH:mm:ss')

    getEmploymentConfirmationTime().then(response => {
      this.EmploymentConfirmationTime = response.data
      //后端转正时间
      if (this.EmploymentConfirmationTime != null) {
        this.EmploymentConfirmationTime = parseDate(this.EmploymentConfirmationTime, 'YYYY-MM-DD HH:mm:ss')
      }
      //转正结果
      this.zhuanzhengTime = this.getDaysBetween(this.EmploymentConfirmationTime, this.newTime)
    })
    getContractEndTime().then(response => {
      this.ContractEndTime = response.data
      //后端合同到期时间
      if (this.ContractEndTime != null) {
        this.ContractEndTime = parseDate(this.ContractEndTime, 'YYYY-MM-DD HH:mm:ss')
      }
      //合同到期结果
      this.hetongTime = this.getDaysBetween(this.ContractEndTime, this.newTime)
    })
    //查询待处理任务
    getTaskToBeDone().then(res => {
      this.taskTobeDone = {...res.data}
    })
  },
  mounted() {

    selectIndexRoleChart().then(e=>{
    var key=[]
      var value=[]
      for (let i = 0; i < e.length; i++) {

        var valueKey=e[i]
        console.log(valueKey)
        key.push(valueKey.role_name)
        value.push(valueKey['count(*)'])
      }

      let colors = ['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272']
      var myChart =echarts.init(document.getElementById('main'));
      let option = {

        title: {
          text: '人员角色数量'
        },
        tooltip: {},
        xAxis: {
          data: key,
          axisLabel: {
            interval: 0,      // 坐标轴刻度标签的显示间隔
            rotate: 40
          },
        },
        yAxis: {},

        series: [
          {
            name: '人数',
            type: 'bar',
            data: value,
            itemStyle: {
              color: params => colors[params.dataIndex] || '#fac858'
            }
          }
        ]
      }
      myChart.setOption(option);
    })



    var chartDom = document.getElementById('main1');
    var myChart1 = echarts.init(chartDom);

    let option1 = {
      title: {
        text: '一周人事处理数'
      },
      xAxis: {
        type: 'category',
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [5, 7, 9, 6, 3, 11, 5],
          type: 'line'
        }
      ]
    }


    option1 && myChart1.setOption(option1);
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    },
    getDaysBetween(dateString1, dateString2) {
      let startDate = Date.parse(dateString1)
      let endDate = Date.parse(dateString2)
      return (startDate - endDate) / (1 * 24 * 60 * 60 * 1000)
    },
    //跳转到外出审批页面
    skipOutApproval(){
      this.$router.push("/out/goout/approval/OutApproval")
    },
    skipWorkOvertimeApproval(){
      this.$router.push("/out/workOvertime/approval/index")
    },
    skipWorkOvertimeVerify(){
      this.$router.push("/out/workOvertime/verify/index")
    },
    skipWorkOvertimeFinalApproval(){
      this.$router.push("/out/workOvertime/finalApproval/index")
    },
    skipLeaveApproval(){
      this.$router.push("/out/leave/approval/index")
    },
    deptSealApproval(){
      this.$router.push("/seal/deptSeal")
    },

  }
}


</script>

<style scoped lang="scss">


#main {
  width: 600px;
  height: 400px;
  margin: 40px auto;
}

#main1 {
  width: 600px;
  height: 400px;
  margin: 40px auto;
}


.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
}
</style>

